<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/content.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script src="./js/ajax.js"></script>
    <script src="./js/cookie.js"></script>
  </head>
  <body>
    <div class="header">
      <div class="head1">
        <img src="./images/header1.png" alt="" />
      </div>
      <div class="head2">
        <img src="./images/ico-comm5.png" alt="" />
      </div>
      <div class="head3">
        <input type="text" class="search" placeholder="请输入想要找的宝贝" />
      </div>
      <div class="head4"><a href="denglu.html">立即登录</a></div>
      <div class="head5"><a href="">购物车</a></div>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><a href="head.html">首页</a></li>
        <li><a href="page.html">枪模主题站</a></li>
        <li><a href="page.html">服饰时尚</a></li>
        <li><a href="page.html">包类专区</a></li>
        <li><a href="page.html">数码外设</a></li>
        <li><a href="page.html">家居日用</a></li>
        <li><a href="page.html">模型手办</a></li>
      </ul>
    </div>
    <div class="contenty"></div>

    <!-- 底部 -->
    <div class="footer">
      <div class="footer1">
        <a href=""><img src="./images/20.png" alt="" /></a
        ><a href=""><img src="./images/21.png" alt="" /></a>
      </div>
      <ul class="footer2">
        <li><a href="">购物指南</a></li>
        <li><a href="">配送方式</a></li>
        <li><a href="">常见操作</a></li>
        <li><a href="">售后服务</a></li>
        <li><a href="">关于我们</a></li>
      </ul>
      <div class="footer3">
        <span><img src="./images/22.png" alt="" /></span>
        <span><img src="./images/23.png" alt="" /></span>
      </div>
    </div>
    <div class="footer-end">
      <div class="footer-end1"><img src="./images/24.png" alt="" /></div>
    </div>
    <script>
      let id = window.location.search.substr(1);
      let contentyEle = document.querySelector(".contenty");
      console.log(id);
      ajax({
        url: "./content.php",
        dataType: "json",

        data: {
          id,
        },
        success(res) {
          console.log(res);

          if (res.status == 1) {
            contentyEle.innerHTML = ` <div class="box">
          <div class="show">
            <img src="${res.info.images}" alt="" />
            <div class="mask"></div>
          </div>
          <div class="list">
            <p class="active">
              <img
                src="${res.info.images}"
                showImg="${res.info.images}"
                enlargeImg="${res.info.images}"
                alt=""
              />
            </p>
            <p class="active">
              <img
                src="${res.info.images}"
                showImg="${res.info.images}"
                enlargeImg="${res.info.images}"
                alt=""
              />
            </p>
          </div>
          <div class="enlarge"></div>
        </div>
        <div class="product-info">
          <h3 class="pord-name">${res.info.name}</h3>
          <div class="pord-tips">CF首个22cm正比例手办周边</div>
          <div class="pord-price clearfix" style="height: auto">
            <!-- 预定商品价格展示 -->
            <span class="fl pord-dispri">￥<strong>${res.info.price}</strong></span>
          </div>

          <div class="pord-detailbox clearfix">
            <div class="fl pord-sold">已售：<span>700</span></div>
          </div>

          <div id="blk_detail_main_spec">
            <div class="mt10 pord-color pord-sellist clearfix">
              <label class="fl">款式</label>
              <ul class="fl ml28">
                <li attrid="330" class="current" style="overflow: hidden">
                  <div class="pord-selbox">收藏版</div>
                </li>
                <li attrid="330" class="" style="overflow: hidden">
                  <div class="pord-selbox">典藏版</div>
                </li>
              </ul>
            </div>
          </div>
          <div id="blk_detail_main_btn">
            <div class="mt10 pord-num clearfix">
              <label class="fl pt10">数量</label>
              <div class="fl ml42">
                <a
                  href="javascript:;"
                  class="fl num-plus numbtn num-plus btn_detail_main_buy_min"
                  ><i class="ico-detail">-</i></a
                >
                <input
                  type="text"
                  size="2"
                  maxlength="3"
                  stock_num="100"
                  limit_num="0"
                  class="fl nummidbtn num inpt_detail_main_buy_num"
                  value="1"
                />
                <a
                  href="javascript:;"
                  class="fl numbtn num-minus btn_detail_main_buy_plus"
                  ><i class="ico-detail">+</i></a
                >
              </div>
            </div>
            <div class="pord-btn clearfix">
              <a
                id="btn_detail_cart_add"
                href="javascript:;"
                class="fl joincart-btn"
                >加入购物车</a
              >
              <a
                id="btn_detail_cart_buy"
                href="javascript:;"
                class="fl ml30 buy-btn"
                >立即购买</a
              >
              <!-- <a href="javascript:;" class="fl btn-collect">
              <i class="ico-detail ico-collect"></i>
              <span>收藏</span>
            </a> -->
              <a
                href="javascript:;"
                class="fl btn-collected"
                style="display: none"
              >
                <i class="ico-detail ico-collect"></i>
                <span>已收藏</span>
              </a>
            </div>
          </div>
        </div>`;
            //放大镜
            function Enlarge(containerEle) {
              this.showEle = containerEle.querySelector(".show");
              this.maskEle = containerEle.querySelector(".mask");
              this.enlargeEle = containerEle.querySelector(".enlarge");
              this.pEle = containerEle.querySelectorAll(".list p");
              this.enterOrLeave();
              this.moveFn();
              this.switchPic();
            }
            //移入移除方法
            Enlarge.prototype.enterOrLeave = function () {
              this.showEle.onmouseenter = () => {
                this.maskEle.style.display = "block";
                this.enlargeEle.style.display = "block";
              };
              this.showEle.onmouseleave = () => {
                this.maskEle.style.display = "none";
                this.enlargeEle.style.display = "none";
              };
            };

            // //移动方法
            Enlarge.prototype.moveFn = function () {
              this.showEle.onmousemove = (e) => {
                let x =
                  e.pageX - this.maskEle.offsetWidth / 2 - boxEle.offsetLeft;
                // console.log(e.clientX)
                let y =
                  e.pageY - this.maskEle.offsetHeight / 2 - boxEle.offsetTop;
                x < 0 ? (x = 0) : (x = x);
                y < 0 ? (y = 0) : (y = y);
                let xx = this.showEle.offsetWidth - this.maskEle.offsetWidth;
                let yy = this.showEle.offsetHeight - this.maskEle.offsetHeight;
                x > xx ? (x = xx) : (x = x);
                y > yy ? (y = yy) : (y = y);
                this.maskEle.style.left = x + "px";
                this.maskEle.style.top = y + "px";
                let bgSize = getComputedStyle(this.enlargeEle)[
                  "background-size"
                ];
                let arr = bgSize.split(" ");
                let bgwidth = parseInt(arr[0]);
                let bgheight = parseInt(arr[1]);
                this.enlargeEle.style.backgroundPosition = `${
                  -x * (bgwidth / this.showEle.offsetWidth)
                }px ${-y * (bgheight / this.showEle.offsetHeight)}px`;
              };
            };

            //切换小图方法
            Enlarge.prototype.switchPic = function () {
              this.pEle.forEach((item, key) => {
                item.onmouseenter = () => {
                  this.pEle.forEach((item) => {
                    item.classList.remove("active");
                  });
                  if (key == 0) {
                    this.showEle.querySelector(
                      "img"
                    ).src = `${res.info.images}`;
                    this.enlargeEle.style.backgroundImage = `url(${res.info.images})`;
                  } else if (key == 1) {
                    this.showEle.querySelector(
                      "img"
                    ).src = `${res.info.images}`;
                    this.enlargeEle.style.backgroundImage = `url(${res.info.images})`;
                  }

                  item.classList.add("active");
                };
              });
            };

            let boxEle = document.querySelector(".box");
            new Enlarge(boxEle);
          }
          let isHaveUid = getCookie("uid");
          let but = document.querySelector("#btn_detail_cart_add");
          // console.log(but);
          but.onclick = function () {
            ajax({
              url: "./addCart.php",
              data: {
                pid: id,
                uid: isHaveUid,
                num: 1,
              },
              dataType: "json",
              method: "post",
            }).then((res) => {
              // console.log(res)

              if (isHaveUid == undefined) {
                alert("请先登录");
              } else {
                alert("添加成功");
                window.location.href = "./buy.html";
              }
            });
          };
        },
      });
    </script>
  </body>
</html>
